<script>
    import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
    import '@shoelace-style/shoelace/dist/components/button/button.js';
    import '@shoelace-style/shoelace/dist/components/menu/menu.js';
    import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
    import '@shoelace-style/shoelace/dist/components/icon/icon.js';
    import {changePath} from "$lib/scripts/change-path.svelte.js";
    import {menuItems} from '$lib/stores/globalControl.svelte.js';
    import {localInfo} from "$lib/stores/Storage.svelte.js";
    import {status} from '$lib/stores/globalControl.svelte.js';
    import {goto} from "$app/navigation";

    let users = $state({});

    $effect(()=>{
        $menuItems.forEach(obj=>{
            if(obj.name === "用户中心"){
                users = obj;
            }
        })
    })

    //退出登录
    function logout(){
        localInfo.clear();
        status.set(true);  //修改插槽的逻辑
        goto("/login");
    }


</script>

<sl-dropdown>
    <sl-button slot="trigger" caret>
        <sl-icon name={users?.icon}></sl-icon>
        {users?.name}
    </sl-button>
    <sl-menu>
        {#each users?.children as child}
        <sl-menu-item onclick={()=>changePath(child?.path)}>{child?.name}</sl-menu-item>
        {/each}


        <sl-divider style="--color: tomato;"></sl-divider>
        <sl-menu-item type="danger" onclick={logout}>退出登录</sl-menu-item>
    </sl-menu>
</sl-dropdown>